<template>
	<div class="box">
		<li v-for="item in shoplist" :key="item.id">
			<div class="goods-box">
				<div class="img-box">
					<img :src="item.src">
				</div>
				<div class="goods-detail">
					<p>{{item.title}}</p>
					<p><span>￥</span>{{item.price}}</p>
					<button @click="add(item)">加入购物车</button>
				</div>
			</div>
		</li>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		// computed:{
		// 	shoplist(){
		// 		return this.$store.state.shoplist
		// 	}
		// }
		computed:mapState(['shoplist']),
		methods:{
			add(item){
				this.$store.commit('add',item)
			}
		}
	}
</script>

<style scoped>
	.box {
		margin-bottom: 40px;
	}

	li {
		list-style: none;
	}

	.goods-box {
		display: flex;
		padding: 10px 10px;
		border-bottom: 1px dashed darkgrey;
	}

	.goods-detail {
		font-weight: bold;
	}

	.img-box {
		width: 140px;
		height: 140px;
		border: 1px solid lightgrey;
		margin-right: 10px;
	}

	.goods-detail p span {
		color: red;
		margin-right: 2px;
	}

	.goods-detail button {
		border: 1px solid orangered;
		background: orangered;
		width: 100px;
		height: 30px;
		text-align: center;
		line-height: 25px;
		color: white;
	}
</style>
